import 'package:flutter/material.dart';

import 'package:get/get.dart';
import 'package:pin_code_fields/pin_code_fields.dart';
import '../../../../services/screebAdapter.dart';

import '../controllers/register_step_two_controller.dart';
import '../../../../widget/logo.dart';
import '../../../../widget/passButton.dart';
import '../../../../widget/passTextField.dart';

class RegisterStepTwoView extends GetView<RegisterStepTwoController> {
  const RegisterStepTwoView({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.white,
        title: const Text('手机号快速登录'),
        elevation: 0,
        centerTitle: true,
      ),
      body: ListView(
        children: [
          const Logo(),
          Container(
            child: Column(
              children: [
                const Text("请输入验证码"),
                Text(
                    "验证码以发送至 +86 ${controller.phonNum.replaceRange(3, 7, "****")}")
              ],
            ),
          ),
          Container(
            margin: EdgeInsets.only(top: ScreenAdapter.height(60)),
            padding: EdgeInsets.all(ScreenAdapter.width(40)),
            child: PinCodeTextField(
              autoFocus: true, //进入就弹出键盘
              keyboardType: TextInputType.number, //调用数字键盘
              length: 6, // 验证码长度
              obscureText: false,
              animationType: AnimationType.fade,
              dialogConfig: DialogConfig(
                  //汉化dialog
                  dialogTitle: "粘贴验证码",
                  dialogContent: "确定要粘贴验证码",
                  affirmativeText: "确定",
                  negativeText: "取消"), //配置dialog
              pinTheme: PinTheme(
                //样式
                // 修改边框
                activeColor: Colors.black12, // 输入文字后边框的颜色
                selectedColor: Colors.orange, // 选中边框的颜色
                inactiveColor: Colors.black12, //默认的边框颜色
                //背景颜色
                activeFillColor: Colors.white,
                selectedFillColor: Colors.orange,
                inactiveFillColor: const Color.fromRGBO(245, 245, 245, 1),

                shape: PinCodeFieldShape.box,
                borderRadius: BorderRadius.circular(5),
                fieldHeight: 50,
                fieldWidth: 40,
              ),
              // 动画时间
              animationDuration: const Duration(milliseconds: 300),
              enableActiveFill: true,
              controller: controller.editingController, //TextFiled控制器
              onCompleted: (v) async {
                // 完成输入
                print("Completed");
                var flag = await controller.validataCode();
                if (flag) {
                  Get.toNamed('/register-step-three', arguments: {
                    "tel": controller.phonNum,
                    "code": controller.editingController.text
                  });
                } else {
                  Get.snackbar("提示信息", "验证码输入有误");
                }
              },
              onChanged: (value) {
                print(value);
              },
              beforeTextPaste: (text) {
                print("Allowing to paste $text");
                return true;
              },
              appContext: context, //注意需要传入context
            ),
          ),
          SizedBox(
            child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Obx(() => controller.seconds.value > 0
                      ? TextButton(
                          onPressed: null,
                          child: Text('${controller.seconds.value}后可重新发送'))
                      : TextButton(
                          onPressed: () {
                            controller.sendCode();
                          },
                          child: const Text('重新发送验证码'))),
                  TextButton(onPressed: () {}, child: const Text('获取帮助'))
                ]),
          ),
        ],
      ),
    );
  }
}
